<template>
  <a-spin :spinning="loading">
    <div class="wms-in-bound2-page">
      <div class="in-bound-page-block block-one">
        <search-box 
          label="托盘号" 
          v-model="prevFrom.containter" 
          :msg-type="msgType.containter"
          :msg="msg.containter"
          :label-width="labelWidth" 
          placeholder="请输入..."
          @search="onContainterSearch" 
          @reset="onContainterReset"
        />
      </div>
      <div class="in-bound-page-block block-two">
        <div class="table-top-box">
          <a-button type="primary" @click="onAddMaterial">添加物料</a-button>
        </div>
        <div class="table-box">
          <a-table :columns="columns" :data-source="list" :row-key="tableKey" :pagination="false">
            <template slot="index" slot-scope="text, record, index">{{index+1}}</template>
            <template slot="specSlots" slot-scope="text, record">
              {{record.materiallength}}*{{record.materialwidth}}*{{record.materialhigh}}
            </template>
            <template slot="action" slot-scope="text, record, index">
              <a-button type="danger" @click.stop="onDel(record,index)">删 除</a-button>
            </template>
          </a-table>
        </div>
      </div>
      <div class="bottom-btns-view">
        <a-button type="primary" :disabled="actionBtnDisabled" @click="onBind">组盘</a-button>
        <a-button type="primary" :disabled="actionBtnDisabled" @click="onManualIntrance">手动入库</a-button>
        <a-button @click="onReset">重 置</a-button>
      </div>
      
      <edit-form ref="form" @callback="handleOk" />
    </div>
  </a-spin>
</template>
<script>
import SearchBox from './searchBox.vue'
import InputLayout from './inputLayout.vue'
import editForm from './editForm.vue'
import { 
  BindEntranceGetContainer, 
  BindAction, 
  BindEntranceManualWare
} from '@/api/modular/main/BindEntranceManage2'
export default {
  name:'wmsBind2EntrancePage',
  components:{SearchBox,InputLayout,editForm},
  data(){
    return {
      loading:false,
      labelWidth:'75px',
      containter:null,
      msg:{
        containter:'',
      },
      msgType:{
        containter:''
      },
      prevFrom:{
        containter:''
      },
      tableKey:'tableKey',
      list:[],
      columns:[
        {
          dataIndex:'index',
          title:'序号',
          fixed:'left',
          width:'60',
          scopedSlots: { customRender: 'index' }
        },
        {
          dataIndex:'materialbatch',
          title:'批次'
        },
        {
          dataIndex:'b',
          title:'供应商'
        },
        {
          dataIndex:'materialspec',
          title:'尺寸',
          scopedSlots: { customRender: 'specSlots' }
        },
        {
          dataIndex:'bindquantity',
          title:'数量'
        },
        {
          dataIndex:'action',
          title:'操作',
          fixed:'right',
          width:'70',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  computed:{
    actionBtnDisabled(){
      let res = true;
      if (this.containter && (this.containter.containerStatus===1||this.containter.containerStatus===2) && this.list.length>0) {
        res = false;
      }
      return res;
    }
  },
  methods:{
    onContainterReset(){
      this.resetContainter()
    },
    onContainterSearch(){
      if (!this.prevFrom.containter) {
        this.msgType.containter = 'error'
        this.msg.containter = '请输入托盘号！';
        return false;
      }
      
      this.msg.containter = ''
      this.loading = true;
      this.getContainterInfo((f)=>{
        this.loading = false;
      })
    },
    resetContainter(){
      this.clearContainter()
      this.clearBackContainer()
    },
    clearContainter(){
    	this.prevFrom.container = ''
    	this.msg.container = ''
    },
    clearBackContainer(){
    	this.containter = null
    },
    getContainterInfo(callback){
      let params = {Containercode:this.prevFrom.containter}
      const __setErrMessage = function(__msg) {
      	if (!__msg) {
      		__msg = '网络错误，请稍后再尝试！'
      	}
      	this.msgType.containter = 'error'
      	this.msg.containter = __msg;
      }.bind(this)
      BindEntranceGetContainer(params).then((d)=>{
        if (d.data) {
        	if (d.data.wmsContainer) {
        		this.containter = d.data.wmsContainer
            let _arr = (d.data.wmsMaterials || []).map((mapObj,mapIndex)=>{
              let _temp = 'ply-'+new Date().getTime()
              mapObj[this.tableKey] = _temp+'_'+mapIndex
              return mapObj
            })
            if (_arr.length>0) {
              this.list = _arr
            }
        		this.msgType.containter = 'info'
        		this.msg.containter = `尺寸：${this.containter.specLength}*${this.containter.specWidth}`
        		callback && callback(true)
        	} else {
        		this.clearBackContainer()
        		__setErrMessage(d.message)
        		callback && callback(false)
        	}
        } else {
        	this.clearBackContainer()
        	__setErrMessage(d.message)
        	callback && callback(false)
        }
      }).catch((err)=>{
        this.clearBackContainer()
        __setErrMessage()
        callback && callback(false)
      })
    },
    onAddMaterial(){
      this.$refs.form.init()
    },
    handleOk(obj){
      this.addToList(obj)
    },
    addToList(obj){
      obj[this.tableKey] = 'ply-'+new Date().getTime()
      this.list.unshift(obj)
    },
    onDel(obj,index){
      this.list.splice(index,1)
    },
    onManualIntrance(){
      this.loading = true;
      this.dealManualIntrance((f)=>{
        this.loading = false;
        if (f) {
          this.$message.success('入库成功！');
          this.resetContainter()
          this.list = [];
        }
      })
    },
    onBind(){
      this.loading = true;
      this.dealBind((f)=>{
        if (f) {
          this.getContainterInfo((f1)=>{
            this.loading = false;
            this.$message.success('组盘成功！');
          })
        } else {
          this.loading = false;
        }
      })
    },
    onReset(){
      this.resetContainter()
      this.list = [];
    },
    dealBind(callback){
      let params = {
        containercode:this.containter.containerCode,
        wmsMaterials:this.list
      }
      BindAction(params).then(()=>{
        callback && callback(true)
      }).catch(()=>{
        callback && callback(false)
      })
    },
    dealManualIntrance(callback){
      let params = {
        containercode:this.containter.containerCode,
        wmsMaterials:this.list
      }
      BindEntranceManualWare(params).then(()=>{
        callback && callback(true)
      }).catch(()=>{
        callback && callback(false)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.wms-in-bound2-page{
  border-radius: 6px 6px 0 0;
  background-color: #fff;
}
.in-bound-page-block{
  border-bottom:2px solid #dcdcdc;
  overflow: auto;
  padding-top: 16px;
  padding-bottom: 16px;
  &.block-two{
    padding-top:12px;
    .table-box{
      padding-top:20px;
      min-height: 241px;
    }
  }
  &.block-three{
     overflow: hidden;
     padding-left:8px;
     padding-right:8px;
  }
}
.bottom-btns-view{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding:16px 8px;
  .ant-btn + .ant-btn {
    margin-left:20px;
  }
}
.block-three-input-box{
  margin: 0 auto;
  width: 600px;
}
.table-top-box{
  padding-left: 20px;
}
</style>
